<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />

<title>Splink comparison viewer</title>
<meta name="description" content="desc" />

<style>{{custom_css}}</style>

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap" rel="stylesheet">

</head>

<body>



{# The observable standard library #}
{# This is usually made available automatically within an observable notebook #}
{# Unfortunately, when used in a notebook, it tries to retrieve #}
{# libraries from online CDNs. #}
{# https://github.com/observablehq/runtime#Runtime #}

{# The issue is that within the notebook, it's using functions from the stdlib like #}
{# the html`` template literal, and Generators.observe #}
{# We could bundle those in splink_vis_utils, but then they'd all have to be prefixed #}
{# with splink_vis_utils like splink_vis_utils.html, and I struggled to get this to work #}

{# So instead, I inline the stdlib code #}
<script>{{stdlib}}</script>

{# And then globally load the functions we need #}
{# This also seems to avoid the problem of stdlib trying and failing to load d3 from a CDNs #}
{# and causing the whole notebook to error #}


<script>
const lib = new window.observablehq.Library()
Generators = lib.Generators
width = lib.width()
html = lib.html()
</script>


<script>{{vega}}</script>
<script>{{vegalite}}</script>
<script>{{embed}}</script>
<script>{{svu_text}} </script>



<script>

 comparison_vector_data = {{comparison_vector_data}};

 splink_settings = {{splink_settings}};


</script>

<div id="outer_container">

    <h2>Splink comparison viewer</h2>

    <div id="controls">

        <div id="observablehq-show_edge_comparison_type"></div>
        <div id="observablehq-sort_bars_option"></div>
        <div id="observablehq-gamma_filters"></div>
        <div id="observablehq-filter_count"></div>

    </div>
    <div id="observablehq-comparison_vector_distribution_chart"></div>

    <div id="observablehq-nothing_selected_message"></div>
    <div id="observablehq-example_index"></div>
    <div id="observablehq-compairson_non_null_table"></div>
    <div id="observablehq-comparison_columns_table"></div>
    <div id="observablehq-waterfall_chart"></div>


<script type="module">

{% if bundle_observable_notebook %}

new splink_vis_utils.Runtime({}).module(splink_vis_utils.define_comparison, name => {

{% else %}

import define from "https://api.observablehq.com/d/c43e4e0aeb54d263@486.js?v=3";
new splink_vis_utils.Runtime().module(define, name => {

{% endif %}

if (name === "viewof show_edge_comparison_type") return new splink_vis_utils.Inspector(document.querySelector("#observablehq-show_edge_comparison_type"));
if (name === "viewof comparison_vector_distribution_chart") return new splink_vis_utils.Inspector(document.querySelector("#observablehq-comparison_vector_distribution_chart"));


if (name === "viewof sort_bars_option") return new splink_vis_utils.Inspector(document.querySelector("#observablehq-sort_bars_option"));
if (name === "viewof gamma_filters") return new splink_vis_utils.Inspector(document.querySelector("#observablehq-gamma_filters"));
if (name === "viewof filter_count") return new splink_vis_utils.Inspector(document.querySelector("#observablehq-filter_count"));

if (name === "viewof example_index") return new splink_vis_utils.Inspector(document.querySelector("#observablehq-example_index"));


if (name === "nothing_selected_message") return new splink_vis_utils.Inspector(document.querySelector("#observablehq-nothing_selected_message"));
if (name === "compairson_non_null_table") return new splink_vis_utils.Inspector(document.querySelector("#observablehq-compairson_non_null_table"));
if (name === "comparison_columns_table") return new splink_vis_utils.Inspector(document.querySelector("#observablehq-comparison_columns_table"));
if (name === "waterfall_chart") return new splink_vis_utils.Inspector(document.querySelector("#observablehq-waterfall_chart"));



});
</script>

</body>
</html>